@import "../const.scss";

$device-field-width: 40rem;
$device-field-width-1st-col: 9rem;
$device-card-field: 6rem;
$device-card-input: 6rem;
$device-card-minimized: 9rem;
$device-card-button-size: 2.5rem;
$device-card-field-label-height: 1.7rem;

$device-card-title-width: 500px;
$device-card-title-width-text: 500px;

.device-field-card {
  padding: $sm-gutter $sm-gutter 0 $sm-gutter;
  overflow-wrap: break-word;
  background-color: $app-clr-2;
  color: $app-white;
  border-radius: $border-radius;
  min-width: $device-field-width;
  max-width: $device-field-width;
  overflow: hidden;
  margin-bottom: $md-gutter;
  margin-right: $md-gutter;
}

.device-field-card-dirty {
  box-shadow: inset 0px 0px 1px 1px $app-clr-yellow-2;
}

.device-field-card-small {
  height: $device-card-minimized;
}

.df-card-header {
  display: flex;
  justify-content: space-between;

  .df-card-menu {
    width: 0;
  }

  .df-card-title {
    display: flex;
    width: $device-card-title-width;

    .df-card-title-chevron {
      margin: $sm-gutter;
      border: none;
      border-radius: 2px;
      background-color: transparent;
      cursor: pointer;
      color: $app-white;
      margin: 0 0.3rem 0 -0.3rem;
    }

    .df-card-title-chevron:focus {
      outline: none;
      box-shadow: 0 0 2px $app-clr-4;
    }

    .df-card-title-chevron-spacer {
      width: $xl-gutter;
    }

    .df-card-title-text {
      * {
        width: $device-card-title-width-text;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      div:first-child {
        color: $app-clr-4;
        font-size: 0.7rem;
        font-weight: 700;
      }
      div:nth-child(2) {
        color: $app-white;
        font-weight: 600;
        font-size: 0.95rem;
      }
    }
  }

  .df-card-value {
    text-align: center;
    div:first-child {
      color: $app-clr-4;
      font-size: 0.7rem;
      font-weight: 700;
    }
    div:nth-child(2) {
      font-size: 0.9rem;
    }
  }

  .df-card-cmd {
    button {
      width: $device-card-button-size;
      height: $device-card-button-size;
    }
  }
}

.df-card-row-wide {
  font-size: 0.7rem;
  text-align: justify;
  font-weight: 700;
  width: 99%;
  margin-top: $md-gutter;
  margin-bottom: $xl-gutter;
  padding-left: 1.6rem;
  color: $app-clr-blue-2;
}

.df-card-row {
  font-size: 0.8rem;
  font-weight: 700;
  display: flex;
  margin-top: $md-gutter;
  margin-bottom: $xl-gutter;
  padding-left: $xl-gutter;

  .card-field-label-height {
    min-height: $device-card-field-label-height;
  }

  input[type="text"],
  input[type="number"] {
    width: $device-card-input;
    margin-right: $xs-gutter;
  }

  .mock-field {
    width: 5.2rem !important;
  }

  .single-width {
    width: $device-card-field !important;
    margin-right: 0.3rem;
  }

  .double-width {
    width: ($device-card-field * 2) !important;
    margin-right: 0.3rem;
  }

  .third-width {
    width: ($device-card-field * 3) !important;
    margin-right: 0.3rem;
  }

  .full-width {
    width: ($device-card-field * 4) !important;
    margin-right: 0.3rem;
  }

  textarea:focus {
    margin-bottom: 0;
  }

  .single-item {
    align-self: flex-end;
  }

  .custom-textarea-xsm {
    width: ($device-card-field * 4);
  }
}

.df-card-row-nogap {
  margin-top: -20px;
}

.df-card-row > div:nth-child(1) {
  width: $device-field-width-1st-col;
  color: $app-clr-yellow-1;
}
